<template>
	<a-modal v-bind="options" class="generate-bill-dialog">
		<div style="height: 70vh">
			<vxe-grid ref="grid" v-bind="gridOptions" :data="list">
				<template #toolbar>
					<vxe-toolbar>
						<template #buttons>
							<div class="tip-class" v-color="{color: 'warning'}">
								<exclamation-circle-outlined />
								将按照下表中手动补抄的读数生成对应的账单，请确认读数的正确性
							</div>
						</template>
					</vxe-toolbar>
				</template>
				<template #status="{row}">{{ row.status ? '已生成' : '待生成' }}</template>
				<template #address="{row}">{{ row.address }}/{{ row.houseAlias }}</template>
				<template #feeSubject="{row}">
					{{ getID(row.feeSubjectId) }}
				</template>
				<template #openRead="{row, rowIndex}">
					<span v-if="props.inpudeShow[rowIndex].firstRead" v-color="{color: 'danger'}">{{ row.firstRead }}(补)</span>
					<span v-else>{{ row.firstRead }}</span>
				</template>
				<template #endRead="{row, rowIndex}">
					<span v-if="props.inpudeShow[rowIndex].lastRead" v-color="{color: 'danger'}">{{ row.lastRead }}(补)</span>
					<span v-else>{{ row.lastRead }}(补)</span>
				</template>
			</vxe-grid>
		</div>

		<template #footer>
			<a-button type="primary" :loading="loading" @click="sendRequest">确 定</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts" setup>
	import {reactive, ref, toRef, watch} from 'vue'
	import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {manualRepairReadRecord} from '@/api/device'
	import settingApi from 'yuxin-base/src/api/setting-api'

	const props = defineProps<{
		visible: boolean
		data: any
		inpudeShow?: any
	}>()
	const list = ref<any>([])
	const loading = ref<boolean>(false)
	const emits = defineEmits(['update:visible', 'close', 'success'])
	const options = reactive({
		title: '生成账单',
		width: 1300,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		bodyStyle: {padding: '15px'},
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})
	const sendRequest = () => {
		const params = (props.data || []).map(item => ({
			energyWarningId: item.id,
			firstRead: item.firstRead,
			lastRead: item.lastRead
		}))

		manualRepairReadRecord(params).then(() => {
			emits('update:visible', false)
			emits('close')
			emits('success')
		})
	}
	const feeSubject = ref<any>([])
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDicList()
			}
		}
	)
	const getDicList = () => {
		// 获取费用科目列表
		// 82308字典修改
		settingApi.getDicListByLabel('FEESUBJECT@ENERGY', {isUse: null}).then(({data}) => {
			feeSubject.value = data[0].metaList
			list.value = [...props.data]
		})
	}
	const getID = id => {
		return feeSubject.value.find(o => o.id === id).name
	}
	// 表头
	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		height: '100%',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '账单状态',
				width: 150,
				align: 'center',
				fixed: 'left',
				slots: {
					default: 'status'
				}
			},
			{
				title: '房源地址/房源编号',
				width: 300,
				align: 'left',
				slots: {
					default: 'address'
				}
			},
			{
				title: '租客姓名',
				minWidth: 130,
				align: 'left',
				field: 'renterName'
			},
			{
				title: '月份',
				minWidth: 100,
				align: 'left',
				field: 'months'
			},
			{
				title: '费用类型',
				minWidth: 130,
				align: 'left',
				slots: {
					default: 'feeSubject'
				}
			},
			{
				title: '期初抄表日期',
				minWidth: 160,
				align: 'left',
				field: 'beginDate'
			},
			{
				title: '期末抄表日期',
				minWidth: 160,
				align: 'left',
				field: 'endDate'
			},
			{
				title: '期初读数',
				width: 120,
				align: 'center',
				slots: {
					default: 'openRead'
				}
			},
			{
				title: '期末读数',
				minWidth: 120,
				align: 'center',
				slots: {
					default: 'endRead'
				}
			}
		]
	})
</script>
<style lang="less">
	.generate-bill-dialog {
		.tip-class {
			margin-bottom: 10px;
		}
	}
</style>
